<template>
  <el-card class="mt-20 mr-20" shadow="never">
    <el-form :model="form">
      <el-table :data="form.devArr" :header-cell-style="tableHeadStyle">
        <el-table-column :label="$t('pageStr.serialnameStr')" align="center" prop="serialName" width="150"/>
        <el-table-column :label="$t('pageStr.serialinfoStr')" align="center">
          <template #default="{row}">
            <div>Rx: {{formatBytes(row.serialRx)}} ({{row.serialRx}} Byte)</div>
            <div>Tx: {{formatBytes(row.serialTx)}} ({{row.serialTx}} Byte)</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('pageStr.linkinfoStr')" align="center" prop="ad"/>
      </el-table>
    </el-form>
  </el-card>
</template>

<script setup>
import {ref, onBeforeMount, onBeforeUnmount} from 'vue'
import {reqGetStatesInfo} from '@/api/serial-server/states-info'
import {formatBytes} from "@/utils";
const form = ref({
  devArr: [{}]
})
let timer = null
onBeforeMount(() => {
  getData()
  timer = setInterval(getData, 5000)
})

function getData() {
  reqGetStatesInfo().then((res) => {
    form.value.devArr.length = 0
    for (const resKey in res) {
      // 如果key包含dev就插入到数组里
      if (resKey.includes('/dev')) {
          form.value.devArr.push({serialName: resKey,serialRx: res[resKey]['serial-rx'],serialTx: res[resKey]['serial-tx']})
      }
    }
    console.log('响应状态信息数据', res, form.value)
  })
}

// table表头的样式
const tableHeadStyle = {
  'text-align': 'center',
  // 'color': '#161940',
  'background-color': '#F5EFE9',
  'max-width': '1000px'
}

onBeforeUnmount(() => {
    timer && clearInterval(timer)
})
</script>

<style scoped>
</style>